<template>
  <div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <!-- <el-form-item label="事件解决人" prop="solveId">
        <el-select v-model="ruleForm.solveId" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="协作解决人" prop="cooperationName">
        <el-select v-model="ruleForm.cooperationName" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="完成时间" prop="finishTime">
        <el-date-picker v-model="ruleForm.finishTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" :editable="false" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="解决方案" prop="solvePlan">
        <el-input v-model="ruleForm.solvePlan" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="更换配件" prop="parts">
        <el-select v-model="ruleForm.parts" placeholder="请选择" style="width: 100%;">
          <el-option label="更换" :value="0" />
          <el-option label="未更换" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="配件更换列表" prop="" v-if="ruleForm.parts==0">
        <el-table :data="partsTableData" style="width: 100%" border>
          <el-table-column prop="partsName" label="备件名称">
            <template #default="scope">
              <el-input type="text" placeholder="请输入" v-model="scope.row.partsName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="partsId" label="备件号">
            <template #default="scope">
              <el-input type="text" placeholder="请输入" v-model="scope.row.partsId"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="partsNumber" label="备件序列号">
            <template #default="scope">
              <el-input type="text" placeholder="请输入" v-model="scope.row.partsNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="newPartsNumber" label="新件序列号">
            <template #default="scope">
              <el-input type="text" placeholder="请输入" v-model="scope.row.newPartsNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template #default="scope">
              <el-button @click="delParts(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="partsAddTable"><el-button @click="addPartsList">添加列表</el-button></div>
      </el-form-item>
      <el-form-item label="处理进度" prop="solveLevel">
        <el-select v-model="ruleForm.solveLevel" placeholder="请选择" style="width: 100%;">
          <el-option label="解决完成" :value="0" />
          <el-option label="临时解决" :value="1" />
          <el-option label="解决失败" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {listUser} from '@/api/system/user'
import {eventDisposeResove} from '@/api/event'

const props = defineProps(['rowID','getList'])
const data = reactive({
  ruleForm: {
  },
  rules: {
    solveId: [
      { required: true, message: '请选择事件解决人', trigger: 'blur' },
      // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
    ],
    finishTime: [
      { required: true, message: '请选择完成时间', trigger: 'blur' },
    ],
    solvePlan: [
      { required: true, message: '请输入解决方案', trigger: 'blur' },
    ],
    parts: [
      { required: true, message: '请选择更换配件', trigger: 'blur' },
    ],
    solveLevel: [
      { required: true, message: '请选择处理进度', trigger: 'blur' },
    ],
  },
  partsTableData:[{partsName:'',partsId:"",partsNumber:"",newPartsNumber:"",id:String(new Date().getTime())}]
});

const { ruleForm, rules ,partsTableData} = toRefs(data);
const ruleFormRef =ref()
/* 添加备件列表 */
const addPartsList = async()=>{
  partsTableData.value.push({partsName:'',partsId:"",partsNumber:"",newPartsNumber:"",id:String(new Date().getTime())})
}
/* 删除备件列表 */
const delParts = (row)=>{
  partsTableData.value = partsTableData.value.filter(item=>item.id!=row.id)
}

const enterSubmit = async()=>{

  console.log(ruleForm.value);

  let isTableFlag  = true
  partsTableData.value.forEach(item=>{
    if(!item.partsName || !item.partsId||!item.partsNumber ||!item.newPartsNumber){
      isTableFlag = false
    }
  })
  if(!isTableFlag && ruleForm.value.parts ==0 ){
    ElMessage.warning('请查看配件列表是否填写完整')
    return false
  }

 
  console.log(partsTableData.value);
  console.log(props.rowID);
  let data = {}
   if(ruleForm.value.parts ==0 ){
    data={...ruleForm.value,id:props.rowID,partsList:partsTableData.value}
   }else if(ruleForm.value.parts ==1 ){

    data={...ruleForm.value,id:props.rowID}

   }



   
console.log(data);


  ruleFormRef.value?.validate(async (valid: boolean) => {
    if(valid){
      console.log(ruleForm.value);
        const res = await eventDisposeResove({...data})
        console.log(res);
          if(res.code==200){
            ElMessage.success('解决完成')
            await props?.getList()
          }

 
       


    }
  })

  return isTableFlag
}




watchEffect(()=>{
  if(props.rowID){
    ruleForm.value = {}
  }
})

const userList = ref<any>([])
const getUserList = async()=>{
  const res  = await listUser()
  console.log(res);
  userList.value = res.rows
}

onMounted(async()=>{
 await getUserList()
})

defineExpose({
  enterSubmit
})
</script>

<style scoped lang="scss">
.partsAddTable{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>
